<template>
	<view class="mea_record">
		<!-- 下方数据详情 -->
		<view class="mea_details">
			<table border v-show='!showDetailTable'>
				<tr>
					<th>设备名称</th>
					<th>日期</th>
					<th>操作</th>
				</tr>
				<tr v-for='item in reportList' :key="item.id">
					<td>{{item.station_name}}</td>
					<td>{{item.date}}</td>
					<td @click='viewDetail(item.id)' style='color: #006fc8'>查看</td>
				</tr>
			</table>
			
			
			<div class='report_div'>
				<table class='report_info' border v-show='showDetailTable' :style='{width: thWidth}'>
					<tr>
						<th colspan='2'>
							时间
						</th>
						<th v-for='(item,index) in this.reportInfo.title_data' :key='index'>{{item}}</th>
					</tr>
					
					<tr>
						<td>起</td>
						<td>止</td>
						<td v-for='(item,index) in this.reportInfo.unit_data' :key='index'>{{item}}</td>
					</tr> 
					
					<tr>
						<td>08:00</td> 
						<td>12:00</td>
						<td v-for='(item,index) in this.reportInfo.the_three_line' :key='index'>{{item}}</td>
					</tr> 
					<tr>
						<td>12:00</td>
						<td>16:00</td>
						<td v-for='(item,index) in this.reportInfo.the_four_line' :key='index'>{{item}}</td>
					</tr> 
					<tr>
						<td>16:00</td>
						<td>20:00</td>
						<td v-for='(item,index) in this.reportInfo.the_five_line' :key='index'>{{item}}</td>
					</tr> 
					<tr>
						<td colspan='2'>小计</td> 
						<td v-for='(item,index) in this.reportInfo.the_six_line' :key='index'>{{item}}</td>
					</tr> 
					<tr>
						<td>20:00</td>
						<td>24:00</td> 
						<td v-for='(item,index) in this.reportInfo.the_seventh_line' :key='index'>{{item}}</td>
					</tr> 
					<tr>
						<td>00:00</td>
						<td>04:00</td> 
						<td v-for='(item,index) in this.reportInfo.the_eighth_line' :key='index'>{{item}}</td>
					</tr> 
					<tr>
						<td>04:00</td>
						<td>08:00</td>
						<td v-for='(item,index) in this.reportInfo.the_nine_line' :key='index'>{{item}}</td>
					</tr> 
					<tr>
						<td colspan='2'>小计</td> 
						<td v-for='(item,index) in this.reportInfo.the_ten_line' :key='index'>{{item}}</td>
					</tr> 
					<tr>
						<td colspan='2'>日总计</td> 
						<td v-for='(item,index) in this.reportInfo.the_eleven_line' :key='index'>{{item}}</td>
					</tr> 
					<tr>
						<td colspan='2'>累计</td> 
						<td v-for='(item,index) in this.reportInfo.all_data' :key='index'>{{item}}</td>
					</tr> 
				 
				</table>
			</div>
			<view class='generate_data' @click="changeGetReportForm">
				<text>生成报表</text>
			</view>
		</view>
	</view>
</template>

<script> 
	export default { 
		data() {
			return {
				// 事件区间选择高亮
				showTimeSele: 1,
				// 参数名称
				objectName: '',
				width: 300,
				thWidth: '',
				currentId: '',
				reportList: [],
				showDetailTable: false,
				reportInfo: {},
				// 白天数据
				repDay: [],
				// 白天小计
				daySubtotal:[],
				// 晚上数据
				nightInfo:[],
				// 晚上小计
				nightSubtotal:'',
				// 总计
				dailyTotal:'',
				// 累计
				allTotal:''
			};
		},
		onLoad(option) { 
			this.currentId = option.id
		},
		mounted() { 
			this.getReportForm(this.currentId)
		},
		methods: {
			// 时间高亮
			btnTime(index) {
				this.showTimeSele = index
			},
			// 获取设备列表数据
			getReportForm(id) { 
				this.$http({
					url: '/wxapi/parameter_list_api/report_form_list',
					method: 'POST',
					data: {
						station_id: id
					}
				}).then(res => {
					if (res.code == 200) { 
						this.reportList = res.data 
					}
				})
			},
			// 查看设备
			viewDetail(id) {
				this.showDetailTable = true
				this.getreportInfo(id)
			}, 
			// 获取设备详情
			getreportInfo(id) {
				this.$http({
					url: '/wxapi/parameter_list_api/report_form_info',
					method: 'POST',
					data: {
						id
					}
				}).then(res => {  
					if (res.code == 200) {
						this.reportInfo = res.data  
					}
				})
			},
			changeGetReportForm(){ 
				this.$http({
					url:'/wxapi/parameter_list_api/report_form',
					method:'POST',
					data:{
						station_id: this.currentId,
						pass: '21c3f18a7ac308f48e3cdf672859753d'
					}
				}).then(res => {
					if(res.code == 200){
						this.getReportForm(this.currentId) 
						uni.showToast({
							title: '报表生成完成',
							icon:'none'
						})
					}else {
						this.getReportForm(this.currentId)
						uni.showToast({
							title: res.msg,
							icon:'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.mea_record {
		.time_sele {
			display: flex;
			justify-content: space-around;
			height: 100rpx;
			background-color: #f3f5f8;

			text {
				flex: 1;
				margin: 30rpx 20rpx;
				height: 50rpx;
				text-align: center;
				border-radius: 25rpx;
				background-color: #fff;
			}
		}

		.time_seles {
			background-color: #2596FF !important;
			color: #fff;
		}

		.mea_details {
			padding: 20rpx 0;

			table {
				text-align: center;
				width: 100%;
				border: none;
			}

			.report_div {
				width: 100%;
				overflow-y: scroll;

				.report_info {
					tr {
						& td:nth-child(1),
						& td:nth-child(2) {
						}

						th,
						td {
							padding-top: 20rpx;
							min-height: 70rpx;
						}
					}
					
				}
			}
		}
		.generate_data{
			padding: 0 20rpx;
			margin: 40rpx auto;
			width: 100rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 24rpx;
			border: 1px solid #eee;
			border-radius: 10rpx;
		}
	}
</style>
